

.pos(@pos,@top,@left) {
  position: @pos;
  top: @top;
  left: @left;
  transform: translate(-50%,-50%);
}

.container {
  /* 让元素铺满整个屏幕 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(#fcdcdf,#f7f7f7);
  .title {
      .pos(absolute,32%,50%);
      transform: translate(-50%,-50%);
      text-align: center;
      font-size: 30px;
      font-weight: 700;
  }
  .player {
    .operation {
      z-index: 2;
      width: 420px;
      height: 95px;
      .pos(absolute,50%,50%);
      box-shadow: 0 15px 15px #f9cccb;
      border-radius: 15px;
      background-color: #fff;
      .cover {
        position:absolute;
        width: 100px;
        height: 100px;
        top: -40px;
        left: 30px;
        border-radius: 100px;
      }
      .operation-items {
        position:absolute;
        display: flex;
        justify-content: space-around;
        width: 196px;
        height: 40px;
        left: 160px;
        top: 50%;
        text-align: center;
        transform: translateY(-50%);
        i {
          /* 由于这里要给它加变换 所以要修改显示样式 */
          font-size: 25px;
          line-height: 40px;
          cursor: pointer;
          transition: all .2s;
          &:nth-child(2) {
            margin: 0 20px;
          }
          &:hover {
            color: #f9cccb;
            transform: scale(1.15);
          }
        }
      }
    }
    .progress {
      .pos(absolute,43%,50%);
      width: 380px;
      height: 80px;
      border-radius: 15px;
      background-color: #fef4f5;
      span {
        display: block;
        line-height: 40px;
        margin-top: 1px;
        margin-left: 155px;
        font-weight: 700;
      }
      .progress-inner {
        position: absolute;
        width: 210px;
        height: 6px;
        top: 38px;
        right: 15px;
        background-color: #fff;
        cursor: pointer;
        border-radius: 2px;
        .silder {
          position:absolute;
          top: 0;
          left: 0;
          height: 100%;
          border-radius:2px;
          background-image: linear-gradient(to right,#ffdcdf,#e7e7e7);
        }
      }
    }
  }
}

